<template>
  <!-- 表单弹窗 -->
  <!-- 蒙层 -->
  <view
    v-if="props.show"
    class="custom-form-overlay"
    @click="emits('close')"
  ></view>
  <!-- 弹窗内容 -->
  <view v-show="props.show">
    <view :class="['custom-form-modal', props.className]">
      <view class="custom-content">
        <view class="custom-content-title">
          <tm-divider
            color="#366EF4"
            :border="8"
            real-color
            vertical
            :height="40"
            :margin="[0, 24]"
          ></tm-divider>
          <view
            class="custom-content-title-text"
            v-if="props.menuInfo?.weidetType === 'search'"
          >
            {{ props.menuInfo.infoTitle }}
          </view>
          <view class="custom-content-title-text" v-else>新建</view>
        </view>
        <view class="custom-content-body">
          <view
            class="custom-content-body-sea"
            v-if="props.menuInfo?.weidetType === 'search'"
          >
            <tm-input
              :searchWidth="120"
              @input="inputFun"
              :height="84"
              v-model="text"
              :placeholder="props.menuInfo.placeholder"
              suffix="tmicon-search"
            ></tm-input>
            <view v-if="selectMember.values.length">
              <view
                class="custom-select-member"
                v-for="item in selectMember.values"
                :key="item.id"
              >
                <view>
                  名称:{{ item.name }}
                  <view>账号:{{ item.code }}</view>
                </view>
                <view>
                  姓名:{{ item.name }}
                  <view>手机号:{{ item.code }}</view>
                </view>
                <view>座右铭:{{ item.remark }}</view>
              </view>
            </view>
          </view>
          <view v-if="props.menuInfo?.weidetType === 'formlist'">
            <tm-form v-model="showData" :label-width="190">
              <tm-form-item
                v-for="item in props.menuInfo.formOption"
                :key="item.field"
                :required="item.required"
                :label="item.name"
                :field="item.field"
                :rules="item.rules"
              >
                <tm-input
                  v-if="item.type === 'input'"
                  v-model="showData[item.field]"
                  :inputPadding="[0, 0]"
                  :transprent="true"
                  :showBottomBotder="false"
                >
                </tm-input>
                <view
                  v-if="item.type === 'select'"
                  @click="showPicker = !showPicker"
                  class="flex flex-row flex-row-center-between"
                >
                  <tm-text
                    :userInteractionEnabled="false"
                    :label="showData[item.field] || '请选择'"
                  ></tm-text>
                  <tm-icon
                    :userInteractionEnabled="false"
                    :font-size="24"
                    name="tmicon-angle-right"
                  ></tm-icon>
                </view>
              </tm-form-item>
            </tm-form>
          </view>
        </view>
      </view>
      <!-- 关闭按钮 -->
      <view class="custom-close">
        <tm-button
          :margin="[10]"
          transprent
          :shadow="0"
          size="normal"
          label="取消"
          outlined
          @click="handleCancel"
        >
        </tm-button>
        <tm-button
          color="#366EF4"
          :margin="[10]"
          :shadow="0"
          size="normal"
          label="确认"
          @click="handleConfirm"
        >
        </tm-button>
      </view>
      <tm-picker
        :columns="pickerlist"
        v-model:model-str="showData.typeName"
        v-model:show="showPicker"
        :default-value="showData.pickerIndex"
        v-model="showData.pickerIndex"
      ></tm-picker>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { InfoPortal } from '@/pages/home/common/portalType'
import orgCtrl from '@/ts/controller'
import { TargetType, companyTypes } from '@/ts/core'
import { reactive, ref, watch } from 'vue'
import tmForm from '@/tmui/components/tm-form/tm-form.vue'

type Props = {
  show: boolean
  className: 'center'
  menuInfo: InfoPortal
  placeholder?: string
  formList?: []
}
const props = defineProps<Props>()
const emits = defineEmits(['close', 'menuClick', 'confirm'])
const selectMember = reactive<any>([])
let text = ref<string>('')
const form = ref<InstanceType<typeof tmForm> | null>(null)
const showData = ref<any>({ pickerIndex: [0] })
const showPicker = ref(false)
const pickerlist = ref()

watch(
  () => props.show,
  (newVal: any) => {
    if (newVal) {
      if (props.menuInfo.formType === 'newGroup') {
        pickerlist.value = [{ text: TargetType.Cohort }]
      } else if (props.menuInfo.formType === 'newCompany') {
        pickerlist.value = companyTypes.map(item => {
          return {
            text: item
          }
        })
      }
    }
  }
)

/** 输入搜索处理 */
const inputFun = async (event: any) => {
  if (event) {
    let searchResult: any[] = []
    switch (props.menuInfo.selectTargetType!) {
      case TargetType.Person:
        searchResult.push(
          ...(await orgCtrl.user.searchTargets(event, [TargetType.Person]))
        )
        break
      case TargetType.Company:
        searchResult.push(
          ...(await orgCtrl.user.searchTargets(event, companyTypes))
        )
        break
      case TargetType.Cohort:
        searchResult.push(
          ...(await orgCtrl.user.searchTargets(event, [TargetType.Cohort]))
        )
        break
    }
    selectMember.values = searchResult
  }
}

/** 清空 */
const clearData = () => {
  selectMember.values = []
  text.value = ''
}

/** 自定义提交事件 */
const handleConfirm = () => {
  if (props.menuInfo.weidetType === 'search') {
    emits('confirm', {
      result: selectMember,
      submitType: props.menuInfo.weidetType
    })
    clearData()
  }
  if (form.value) {
    form.value.submit()
    // 使用表单组件的 validate 方法进行表单校验
    if (form.value.validate().isPass) {
      emits('confirm', {
        result: showData.value,
        submitType: props.menuInfo.weidetType
      })
      form.value?.reset()
    }
  }
}

/** 自定义取消事件 */
const handleCancel = () => {
  emits('close')
  if (props.menuInfo.weidetType === 'search') {
    clearData()
  } else {
    pickerlist.value = []
    form.value?.reset()
  }
}
</script>

<style lang="scss" scoped>
/* 蒙层样式 */
.custom-form-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* 半透明背景 */
  z-index: 9; /* 设置在最顶层 */
}

/*  #ifdef H5 || MP-ALIPAY   */
.center {
  position: fixed;
  top: 15%;
  left: 7%;
  transition: translate(-50%, -25%);
}
/*  #endif  */

/*  #ifdef MP-WEIXIN   */
.center {
  position: fixed;
  top: 30%;
  left: 7%;
  transition: translate(-50%, -50%);
}
/*  #endif  */

.custom-form-modal {
  width: 80vw;
  min-height: 300rpx;
  background-color: #fff;
  padding: 20rpx 20rpx 0rpx 20rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
  z-index: 10; /* 设置在蒙层之上 */
  .custom-content {
    .custom-content-title {
      width: 100%;
      height: 40rpx;
      display: flex;
      align-items: center;
      margin-bottom: 28rpx;
      .custom-content-title-text {
        margin-left: 18rpx;
      }
    }
    .custom-content-body {
      height: 100%;
      .custom-content-body-sea {
        .custom-select-member {
          margin-top: 26rpx;
          border: 2rpx solid #366ef4;
          background-color: #c9d6f4;
          border-radius: 6rpx;
          padding: 12rpx;
        }
      }
    }
  }
  .custom-close {
    width: 100%;
    height: 80rpx;
    box-sizing: border-box;
    margin-top: 60rpx;
    margin-bottom: 10rpx;
    font-size: 35rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
